<!DOCTYPE html>
<html>
<head>
    <title>代理测试</title>
</head>
<body>
    <h1>前后端连接测试</h1>
    
    <h2>测试结果：</h2>
    <div id="result"></div>
    
    <h2>测试步骤：</h2>
    <button onclick="test1()">1. 测试相对路径 /bigscreen/platformTitle</button><br><br>
    <button onclick="test2()">2. 测试完整路径 http://localhost:8081/bigscreen/platformTitle</button><br><br>
    
    <h2>配置信息：</h2>
    <pre id="config"></pre>
    
    <script>
        // 显示配置信息
        document.getElementById('config').textContent = 
            '前端地址: ' + window.location.href + '\n' +
            'VUE_APP_BASE_API: (查看控制台)\n' +
            '代理配置: /bigscreen -> http://localhost:8081';
        
        function test1() {
            console.log('测试相对路径...');
            fetch('/bigscreen/platformTitle')
                .then(res => res.json())
                .then(data => {
                    document.getElementById('result').innerHTML = 
                        '<p style="color:green">✅ 相对路径测试成功!</p>' +
                        '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
                    console.log('相对路径成功:', data);
                })
                .catch(err => {
                    document.getElementById('result').innerHTML = 
                        '<p style="color:red">❌ 相对路径测试失败!</p>' +
                        '<pre>' + err.message + '</pre>';
                    console.error('相对路径失败:', err);
                });
        }
        
        function test2() {
            console.log('测试完整路径...');
            fetch('http://localhost:8081/bigscreen/platformTitle')
                .then(res => res.json())
                .then(data => {
                    document.getElementById('result').innerHTML = 
                        '<p style="color:green">✅ 完整路径测试成功!</p>' +
                        '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
                    console.log('完整路径成功:', data);
                })
                .catch(err => {
                    document.getElementById('result').innerHTML = 
                        '<p style="color:red">❌ 完整路径测试失败!</p>' +
                        '<p>可能是跨域问题，请检查后端CORS配置</p>' +
                        '<pre>' + err.message + '</pre>';
                    console.error('完整路径失败:', err);
                });
        }
        
        // 页面加载时自动测试
        window.onload = function() {
            console.log('=== 开始自动测试 ===');
            setTimeout(() => test1(), 1000);
        };
    </script>
</body>
</html>
